<script setup lang="ts">
import PlantVideoItem from '@/components/plant/PlantVideoItem.vue'
import HeadlineComponent from "@/components/plant/HeadlineComponent.vue"
import BuyerShow from '@/components/plant/BuyerShow.vue'
import { getVideoList_l } from '@/api/lidare'
import { ref, onMounted, watch } from 'vue'
// import type { VideoItem } from "@/type/lidare"
import { useCounterStore } from "@/stores/counter"
import { storeToRefs } from 'pinia'
import type { VideoItem } from "@/type/lidare"
const store = useCounterStore();
const { changeVideoList, getMoreVideoList, addVideoPage } = store;
const { videoList, videoPage } = storeToRefs(store);
const active = ref(0);

//处理视频列表
// const videoList = ref<Array<VideoItem>>([]);
// watch(videoList,()=>{
//   changeVideoList(videoList.value);
// });
//处理重复视频
const sloveList = (list: Array<VideoItem>) => {
  let temp: Array<VideoItem> = [];
  list.forEach((el: VideoItem) => {
    let check = true;
    try {
      temp.forEach(item => {
        if (item.id == el.id) check = false;
      });
    } catch { }
    if (check) {
      temp.push(el);
    }
  });
  list = temp;
}
onMounted(async () => {
  let res = await getVideoList_l();
  let list = res.data._data.lists;
  sloveList(list);
  changeVideoList(list);
  console.log(videoList.value);

});
//处理加载状态
const loading = ref(false);
const finished = ref(false);
const onLoad = async () => {
  addVideoPage(1);
  let res = await getVideoList_l(videoPage.value);
  let list = res.data._data.lists;
  sloveList(list);
  changeVideoList(list, videoList.value);
  loading.value = false;
}
</script>
<template>
  <div class="plant-grass">
    <header class="header">
      <div class="header-item" :class="{ active: active == 0 }" @click.stop="active = 0">视频</div>
      <div class="header-item" :class="{ active: active == 1 }" @click.stop="active = 1">头条</div>
      <div class="header-item" :class="{ active: active == 2 }" @click.stop="active = 2">买家秀</div>
      <div class="img-box">
        <svg t="1678187764457" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2762" width="16" height="16">
          <path
            d="M768.6 635.2h-0.4c-17.7-0.2-31.8-14.7-31.7-32.3 0.8-76.9 1.2-164.4 0.3-176.5-2.3-17 9.3-32.9 26.4-35.8 17.4-3 33.9 8.8 36.9 26.2 0.7 4 1.6 9.5 1.1 100.1-0.2 43.5-0.7 86.2-0.7 86.7-0.1 17.5-14.4 31.6-31.9 31.6z m-31.7-208.5c0 0.3 0.1 0.6 0.1 0.8 0-0.3-0.1-0.5-0.1-0.8z"
            p-id="2763" fill="#151515"></path>
          <path
            d="M768.4 456c-17.7 0-32-14.3-32-32 0-123.1-100.1-223.2-223.2-223.2S290 300.9 290 424c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-76.7 29.9-148.8 84.1-203.1 54.2-54.2 126.4-84.1 203.1-84.1s148.8 29.9 203.1 84.1c54.2 54.2 84.1 126.4 84.1 203.1 0 17.7-14.4 32-32 32z"
            p-id="2764" fill="#151515"></path>
          <path
            d="M586.3 211.5c-3.1 0-6.2-0.4-9.2-1.3-20.7-6.2-42.2-9.3-63.9-9.3-21.7 0-43.2 3.1-63.9 9.3-8.8 2.6-18.2 1.4-26-3.4-7.8-4.8-13.1-12.7-14.7-21.7-1.1-6-1.6-12.2-1.6-18.3 0-28.6 11.4-54.9 32-73.9 19.7-18.2 46-28.2 74.2-28.2s54.5 10 74.2 28.2c20.6 19.1 32 45.4 32 73.9 0 6.1-0.5 12.3-1.6 18.3-1.6 9-6.9 16.9-14.7 21.7-5.1 3-10.9 4.7-16.8 4.7z m-73.1-83.1c-10.6 0-21.2 3.3-29.2 9.9 19.3-2 39-2 58.4 0-8-6.5-18.6-9.9-29.2-9.9zM258.1 630.1h-0.4c-17.7-0.2-31.8-14.7-31.7-32.3 0.8-76.9 1.2-164.4 0.3-176.5-2.3-17 9.3-32.9 26.4-35.8 17.4-3 33.9 8.8 36.9 26.2 0.7 4 1.6 9.5 1.1 100.1-0.2 43.5-0.7 86.2-0.7 86.7-0.1 17.5-14.4 31.6-31.9 31.6z m-31.7-208.5c0 0.3 0.1 0.6 0.1 0.9 0-0.4 0-0.7-0.1-0.9z"
            p-id="2765" fill="#151515"></path>
          <path
            d="M807.2 838h-0.2l-590.4-4c-22.6 0-42.9-10.8-54.2-28.8-10.7-16.9-11.8-38.1-3.1-57l69.3-162.7c6.9-16.3 25.7-23.8 42-16.9 16.3 6.9 23.8 25.7 16.9 42L219.7 770l586.4 4-67.8-163.6c-6.8-16.3 1-35 17.3-41.8 16.3-6.8 35 1 41.8 17.3l68.3 164.8v0.1c8 19.5 5.8 41.7-6 59.2-11.7 17.5-31.3 28-52.5 28z m-589.8-62.7z m589.1-0.2z"
            p-id="2766" fill="#151515"></path>
          <path
            d="M508.2 961.6c-41 0-79.7-16.8-109-47.4-28.7-30-44.4-69-44.4-110 0-17.7 14.3-32 32-32s32 14.3 32 32c0 50.6 40.9 93.4 89.4 93.4 50.4 0 89.4-50.2 89.4-93.4 0-17.7 14.3-32 32-32s32 14.3 32 32c0 38.5-16.1 77.9-44.2 108-29.7 31.9-68.5 49.4-109.2 49.4z"
            p-id="2767" fill="#151515"></path>
        </svg>
      </div>
    </header>
    <section class="content" title="列表">
      <KeepAlive>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" v-if="active == 0">
          <div class="video-list">
            <PlantVideoItem v-for="(item, index) in videoList" :key="index" :item="item" :width="'1.72rem'"
              :height="'2.52rem'" />
          </div>
        </van-list>
        <HeadlineComponent v-else-if="active == 1" />
        <BuyerShow v-else-if="active == 2" />
      </KeepAlive>
    </section>
  </div>
</template>
<style lang="scss" scoped>
.plant-grass {
  width: 100%;
  padding-bottom: .5rem;

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: .5rem;
    background-image: url("/images/plant/1678187437277.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-white);

    >div {
      opacity: .8;
    }

    .header-item {
      position: relative;
      width: .9rem;
      height: 100%;
      box-sizing: border-box;
      line-height: .5rem;
      padding: 0 0.15rem;
      font-size: .13rem;
      transition: .1s;
      text-align: center;

      &:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: .05rem;
        margin: 0 auto;
        background-color: transparent;
        width: .2rem;
        height: .04rem;
        border-radius: .04rem;
        transition: .3s;
      }
    }

    .active {
      font-size: .17rem;
      opacity: 1;

      &::after {
        background-color: var(--bgc-white);
      }
    }

    .img-box {
      position: absolute;
      right: .1rem;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: .2rem;
      min-width: .2rem;
      height: .2rem;

      svg,
      path {
        fill: var(--text-white);
      }
    }
  }

  .content {
    .video-list {
      width: 100%;
      box-sizing: border-box;
      padding: 0.2rem 0.1rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      >div {
        margin-bottom: .2rem;
      }
    }
  }
}
</style>